<template>
  <div class="app-container" :loading="submitLoading">
    <div class="filter-container">
      <div style="align-items: center;display: flex;">
        <!-- <div>
          <el-input v-model="listQuery.key_word" placeholder="搜索关键字"></el-input>
        </div>
        <el-button type="primary" icon="el-icon-search" @click="searchList()">
          搜索
        </el-button> -->
        <el-button type="primary" icon="el-icon-plus" @click="add">
          添加
        </el-button>
      </div>
    </div>
    <!-- 列表 -->
    <el-table :data="list" v-loading="listLoading" border style="width: 100%;">
      <el-table-column label="id" prop="id" align="center" width="70">
        <template slot-scope="{row}">
          <span>{{ row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column label="账号" align="left">
        <template slot-scope="scope">
          <span>{{scope.row.role_name}}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="排序" align="center" width="50">
        <template slot-scope="scope">
          <span>{{scope.row.sort}}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="110">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="修改" placement="top">
            <el-button size="mini" icon="el-icon-edit" type="success" @click="edit(scope.row)">
              <!-- 修改 -->
            </el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <el-popconfirm title="确定删除吗？" @onConfirm="list_del(scope)">
              <!-- 前4个角色是内置角色，不能删除-->
              <el-button slot="reference" v-if="scope.row.id>4" style="margin-left: 10px;" size="mini" icon="el-icon-delete" type="danger">
                <!-- 删除 -->
              </el-button>
            </el-popconfirm>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 各个弹框-->
   <el-dialog v-el-drag-dialog title="编辑" :visible.sync="popup_edit_show" width="50%" center>
      <div>
        <el-form ref="diary_details" :rules="rules" :model="diary_details" label-width="80px" style="text-align: left;">
          <el-form-item label="角色名称" prop="role_name">
            <el-input type="type" v-model="diary_details.role_name" placeholder="请输入角色名称"></el-input>
          </el-form-item>
          <el-form-item label="菜单">
            <el-tree
              :data="edit_menu"
              show-checkbox
              node-key="id"
              ref="tree"
              :props="defaultProps"
              :check-strictly="true"
              :default-expand-all="true"
              >
              <!-- :default-checked-keys="menu_selected" -->
            </el-tree>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel_add()">取 消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="submit_edit()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog v-el-drag-dialog title="添加" center :visible.sync="popup_add_show" width="50%" center>
      <div>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="addForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="角色名称" prop="account">
            <el-input type="type" v-model="ruleForm.account" placeholder="请输入角色名称"></el-input>
          </el-form-item>
          <el-form-item label="菜单">
            <el-tree
              :data="menu"
              show-checkbox
              node-key="id"
              ref="tree"
              :props="defaultProps"
              :check-strictly="true"
              :default-expand-all="true"
              >
              <!-- ref="tree"
              default-expand-all
              highlight-current -->
            </el-tree>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="popup_add_show=false">取 消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="submit_add()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分页-->
    <!-- <div class="fenye">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="page_limit"
        layout="total, sizes, prev, pager, next, jumper" :total="page_count">
      </el-pagination>
    </div> -->
  </div>
</template>
<script>
  import {
    role_list,
    role_del,
    role_add,
    role_edit,
    menus_list
  } from '@/api/user/user_roles'
  export default {
    name: 'setup_notice',
    data() {
      return {
        menu_selected:[],
        edit_menu:[],
        menu: [],
        defaultProps:{
          children: 'children',
          label:'title'
        },
        role_drop:[],
        market_role: '',
        dir_acc:"",
        diary_details:{
          account:"",
        },
        ruleForm: {
          title: '',
          content: '',
          sort: 0,
          is_top: false
        },
        rules: {
          role_name:[{
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }],
          real_name: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }],
          pwd: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }],
          pwd2: [{
            required: true,
            message: '请输入重复密码',
            trigger: 'blur'
          }],
          account: [{
            required: true,
            message: '请输入账号',
            trigger: 'blur'
          }],
          market_role: [{
            required: true,
            message: '请输入标题',
            trigger: 'blur'
          }]
        },
        listLoading: 0,
        submitLoading: false,
        popup_edit_show: false,
        popup_add_show: false,
        dialogVisible: false,
        // jia_content: "",
        // jia_title: "",
        list: null,
        listQuery: {
          key_word:"",
        },
        // tableKey: 1,
        currentPage: 1,
        page_count: 0,
        page_limit: 10,
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }],
        }
      }
    },
    created() {
      this.getList()
      this.role_obtain()
    },
    mounted() {

    },
    methods: {
      // 获取列表数据
      getList(page, limit, listQuery) {
        page = page || this.currentPage
        limit = limit || this.page_limit
        //定义listquery，为了下方可以使用key_word.....
        listQuery = listQuery || this.listQuery
        let keyWord = listQuery.key_word || ''
        console.log('9999999999',listQuery.searchTime)
        // let searchTime = listQuery.searchTime && listQuery.searchTime.length>0 ? listQuery.searchTime.toString() : ''
        this.listLoading = true
        role_list(page, limit, keyWord).then(res => {
          console.log(res, "公告")
          this.list = res.data
          this.page_count = res.count
          this.listLoading = false
        })
      },
      //菜单获得
      role_obtain(){
        menus_list().then(res=>{
          console.log(res,"表单")
          this.menu=res.data
          this.edit_menu=res.data
          console.log(this.menu)
        })
      },
      //搜索事件
      searchList(){
        console.log(this.currentPage,"222")
        this.getList(1, this.page_limit, this.listQuery)
      },
      //每页几条数据
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.page_limit = val
        this.getList(1, val,this.listQuery);
      },
      //跳转到
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val
        this.getList(val, this.page_limit,this.listQuery);
      },
      //新增数据提交
      submit_add() {
        console.log("开始")
        console.log(this.$refs.tree.getCheckedKeys(),"ssss");
        console.log("结束")
        let menus= this.$refs.tree.getCheckedKeys().toString()
        this.$refs.addForm.validate((valid) => {
          if (valid) {
            this.submitLoading = true
            role_add(this.ruleForm.account,menus).then(res => {
                if (res.code == 200) {
                  this.$message({
                    message: res.msg,
                    type: 'success'
                  });
                  this.getList(this.currentPage,this.page_limit,this.listQuery)
                  this.popup_add_show = false
                  this.submitLoading = false
                }
              }).catch(() => {
              this.submitLoading = false
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      list_del(val) {
        let that = this
        role_del(val.row.id).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: 'success'
            });
            this.getList(this.currentPage, this.page_limit, this.listQuery)
          }
        })
      },
      list_detail(val) {
        let that = this
        notice_detail(val.row.id).then(res => {
          console.log(res)
          if (res.code == 200) {
            that.dialogVisible = true
            that.diary_details = res.data
          }
        })
      },
      // 修改是否置顶 istop 1,0
      changeIsTop(val, isTop) {
        notice_top(val.row.id, isTop).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: 'success'
            });
            this.getList(this.currentPage, this.page_limit, this.listQuery)
          }
        })
      },
      add(val) {
        this.ruleForm.is_top = false
        this.popup_add_show = true
      },
      edit(val) {
        console.log(val.role_name)
        this.popup_edit_show = true
        this.diary_details=val
        this.$nextTick(()=>{
            console.log(11111111111);
            this.$refs.tree.setCheckedKeys(val.menus_arr);
            console.log(2222222222);
        });
      },
      submit_edit() {
        let that = this
        console.log(this.$refs.tree.getCheckedKeys(),"选中");
        that.diary_details.menus=this.$refs.tree.getCheckedKeys().toString()
        this.$refs.diary_details.validate((valid) => {
          if (valid) {
            console.log(that.diary_details, "fff")
            that.submitLoading = true
            role_edit(that.diary_details).then(res => {
              if (res.code == 200) {
                that.popup_edit_show = false
                that.submitLoading = false
                that.getList(this.currentPage,this.page_limit,this.listQuery)
              }
            })
          } else {
            console.log("输入框错误")
          }
        })
      this.$refs.tree.setCheckedKeys([])
      },
      cancel_add(){
        this.popup_edit_show=false
        this.$refs.tree.setCheckedKeys([])
      }
    }
  }
</script>
<style type="text/css" scoped>
  .sort-class{
    color: #67B5F4;
    font-size: 12px;
  }
  .sortable-ghost {
    opacity: .8;
    color: #fff !important;
    background: #42b983 !important;
  }

  .fenye {
    padding: 20px 0px;
  }

  .el-range-editor.el-input__inner {
    width: 205px !important;
    padding: 3px 3px !important;
  }
</style>